<template>
    <div class="wapper">
        <swiper :options="swiperOption" ref="mySwiper">
            <!-- slides -->
            <swiper-slide v-for="item in swiperList" :key="item.id" v-if="swiperList.length"><img :src="item.imgUrl" alt=""></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<style scoped>

.wapper >>> .swiper-pagination-bullet-active{
    background-color: #ffffff !important;
}

.wapper{
    width: 100%;
    /* height: 31.25vw; */
    background-color: #eee;
}
img{
    width: 100%;
}
</style>

<script>
export default {
    name:"homeSwiper",
    props:['swiperList'],
    data(){
        return{
            title:"swiper",
            swiperOption: {
                pagination:".swiper-pagination"
                // some swiper options/callbacks
                // 所有的参数同 swiper 官方 api 参数
                // ...
            },
        }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      //console.log('this is current swiper instance object', this.swiper)
      this.swiper.slideTo(3, 1000, false)
    }
}
</script>
